<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="title"
    :close-on-click-modal="false"
    width="600px"
    @close="close"
  >
    <!--  html  -->
    <div class="flexRBC">
      <vue-qr
        v-if="code"
        :text="code"
        :size="200"
        :margin="10"
        class="device-code"
      />
      <div>
        <div class="code-text flexRSC">授权码：<span>{{ code }}</span>
          <el-button size="mini" type="primary" round style="margin-left: 10px" @click="refresh">刷 新</el-button>
        </div>
        <div class="expire-time">
          <div>授权码有效期至：<span>{{ expireTime }}</span></div>
          <div v-if="isExpire" class="app-text-color-danger">授权码已过期，请刷新</div>
        </div>
        <div class="describe">说明：设备授权码是用于在门店铺设设备时所使用的临时授权码，其可帮助你快速铺设设备，使用授权码需要注意：刷新授权码会使旧授权码失效，你可以在授权码已经被泄露的情况选择刷新授权码
        </div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" round @click="hide">关 闭</el-button>
      <!--      <el-button size="small" round type="primary" @click="handleSubmit('form')">确 定</el-button>-->
    </div>
  </el-dialog>
</template>

<script>
import { activeDeviceCode, refreshActiveDeviceCode } from '@/api/business'

export default {
  data() {
    return {
      // 配置
      title: '设备授权码',
      resolve: null,
      reject: null,
      // 状态
      dialogVisible: false,
      loading: false,
      // 数据
      code: null,
      expireTime: null,
      isExpire: false
    }
  },
  computed: {},
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
    console.log(this.$momentMini().isAfter('2020-11-18 15:20:55'))
  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {
    // 弹框相关
    open() {
      this.fetchData()
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    close() {
      this.loading = false
    },

    // handleSubmit(formName) {
    // this.$refs[formName].validate(valid => {
    //   if (valid) {
    //   }
    // })
    // },

    /**
     * 数据组
     */
    // 获取授权码
    fetchData() {
      this.loading = true
      activeDeviceCode().then(res => {
        console.log(res)
        this.code = res.data.code
        this.expireTime = res.data.expireTime
        this.isExpire = this.$momentMini().isAfter(res.data.expireTime)
      }).finally(() => {
        this.loading = false
      })
    },

    // 获取授权码
    refresh() {
      this.loading = true
      refreshActiveDeviceCode().then(res => {
        this.code = res.data.code
        this.expireTime = res.data.expireTime
        this.isExpire = this.$momentMini().isAfter(res.data.expireTime)
      }).finally(() => {
        this.loading = false
      })
    }
    /**
     * 按钮组
     */
    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.device-code {
  width: 200px;
  height: 200px;
  margin-right: 10px;
}

.code-text {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
  color: #000;
}

.expire-time {
  margin-bottom: 20px;
}
</style>
